<!--
 * @Author: liuyonghu
 * @Date: 2022-10-19 17:22:59
 * @LastEditTime: 2023-02-09 11:39:09
 * @LastEditors: liuyonghu
 * @Description: 
 * @FilePath: \demo\1.html
-->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <textarea id="my" onblur="onblurAction(event)"></textarea>
  <br />
  <div onclick="onblurAction()">click</div>
  <canvas></canvas>
</body>
<script>
  // canvas to img

  // const canvas = document.querySelectorAll("canvas");
  // const ctx = canvas[0].getContext('2d');
  // ctx.fillStyle = 'red';
  // ctx.fillRect(0,0,150,175);
  // canvas.forEach(element => {
  //   element.toBlob((blob) => {
  //     window.open(URL.createObjectURL(blob));
  //   })
  // });

  const channel = new MessageChannel();

  channel.port1.onmessage = (res) => {
    console.log(' port1 res === ', res)

  }
  channel.port2.onmessage = (res) => {
    console.log(' port2 res === ', res)

  }
  // window.onmessage = (res) => {
  //   console.log(' window res === ', res)

  // }
  setTimeout(() => {
    // window.postMessage(' hello this is a message', "*", [channel.port2]);

    channel.port1.postMessage(' hello this is a message')
  }, 2000);

</script>

</html>